iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
Modern Web

試著學 Hexo系列 第 26

(26) 試著學 Hexo - 奇淫技巧 - 自動化部屬(Travis CI)

  • 分享至 

  • xImage
  •  

前言

接下來這一篇開始會是一系列的奇淫技巧(怪怪的名詞),第一篇就先獻給自動化部屬吧。

自動化部屬

通常我們在寫完一篇文章時都必須輸入 hexo d -g 來編譯生成靜態網頁並上傳到 gh-pages,而這個編譯過程其實也會消耗電腦本身的運算,因此我相信你在輸入 hexo d -g 都有感受到電腦突然風扇高速運轉。

那麼為了解決這個問題,我們就必須藉助 CI/CD,而什麼是 CI/CD 呢?這邊推薦之前的前輩所撰寫的文章

Day12 什麼是 CICD

介紹什麼是 CI/CD 並不是本篇的重點,而是如何使用才是重點,因此本篇將會介紹兩種做法,分別是

  • Travis CI
  • GitHub Actions

上傳 Hexo 專案

在準備做後面的 Travis CI or GitHub Action 之前我們必須先將專案上傳到特定的遠端儲存庫,否則後面操作會無法操作唷~

因此這邊會先建立一個遠端儲存庫是屬於 Travis 專用的

https://ithelp.ithome.com.tw/upload/images/20201009/20119486FQSL6pQrDX.png

初次上傳的方式很簡單,我這邊就不再次重複說明,如果你對於 Git 指令還是不熟悉的話,可以考慮回顧一下「(12) 試著學 Hexo - 你不能不學的 Git 基本指令」章節或者是參考「Git & GitHub 教學手冊」,所以我這邊就直接貼上出事上傳的指令快速帶過否則這一篇會很長。

git add .
gti commit -m 'first'
git remote add origin https://github.com/jc-eng/Travis-hexo-project.git
git push -u origin master

基本上之後你新增文章時,就只需要輸入以下就可以了

git add .
gti commit -m 'first'
git push

這邊請確認您的這個儲存庫是像這樣再繼續往下操作唷

https://ithelp.ithome.com.tw/upload/images/20201009/20119486XkYWcHGWbm.png

Travis CI

Travis CI 相信滿多人都聽過,我們會使用 Travis CI 的 CI(持續整合)來達到自動部署到我們的 gh-pages,而 CI 的運作模式大概是怎樣呢?簡單來講當使用者將程式碼 commit 到遠端儲存庫時,就會被這個程式自動化處理一些事情,舉凡測試、打包甚至是部署等行為。

而在使用時 Travis CI 必須注意到一件事情就是它有分企業版與非營利版,只需要看網址就可以知道哪一個是企業版與非營利版

這兩者有什麼差別呢?以我個人來講我是推薦使用「非營利版」就好,因為是免費的。

只是唯一缺點是你必須開源你的專案才能夠使用,如果你的專案是 Private,那麼就必須使用企業版,而企業版最大缺點就是前 100 次免費而已,因此當你 100 次使用完畢就必須付費囉~

因此這邊我將會介紹「非營利版」為主。

Travis CI 非營利版

基本上 Travis CI 是可以使用 GitHub 帳號登入,所以註冊帳號就真的非常沒有什麼直接快速跳過。

進入到 Travis CI 之後點一下上方 menu 的 setting

https://ithelp.ithome.com.tw/upload/images/20201009/20119486JEPN3xklNK.png

接下來我們必須找到剛剛我們建立的「Travis-hexo-project」儲存庫,如果沒看到的話可以按一下左側的「Sync Account」按鈕,這邊主要是確定專案是找得到為主。

Github Access Token

確定可以在 Travis CI 找到專案之後,讓我們回到 GitHub,進入 Github Access Token 頁面,若找不到的人可以直接點下面連結

Github Access Token

進入到 Github Access Token 之後點一下位於右上的 Generate new token 按鈕

https://ithelp.ithome.com.tw/upload/images/20201009/20119486SBxYdLRjYc.png

名稱可以隨你取名,重點是 repo 下的 public_repo,然後再滾到下方儲存產生 token

https://ithelp.ithome.com.tw/upload/images/20201009/20119486V1E6mAseb5.png

當你送出之後你會取得一組 token (綠色框內)麻煩請複製下來(不要外流)

https://ithelp.ithome.com.tw/upload/images/20201009/201194863vVLy63oKF.jpg

然後這邊回到 Travis CI 找到我們剛剛建立的專案,按一下 setting 進入 setting 畫面,下面會有一個「Environment Variables」欄位填入以下資訊

  • name: GITHUBHEXO_TOKEN
  • value: 剛剛的 token

https://ithelp.ithome.com.tw/upload/images/20201009/20119486LtvnHmapz0.jpg

填入完畢後按下 Add 按鈕即可。

建立 .travis.yml

接下來的流程很重要,我們要建立一個檔案是屬於 Travis CI 的設定檔,Travis CI 的運作都會透過該檔案,例如:產生網頁、安裝環境等,因此我們要在 Hexo 的專案下建立一個檔案叫做 .travis.yml(這邊要注意是根目錄哦)

https://ithelp.ithome.com.tw/upload/images/20201009/20119486RsMpXTAqkI.png

內容填入要填什麼呢?這邊我直接提供現成的範本給你們,這樣就不用擔心了。

# 設置系統語言環境
language: node_js
# 是否需要 sudo 權限
sudo: false
# 設置node_js版本
node_js:
  - '12'
# 設置暫存區塊
cache:
  apt: true
  directories:
      - node_modules # 不經常變動的資料夾
# 指定部落格分支,一般來講是 Master,這是在告知當這個分支有 commit 時候就執行部屬指令
branches:
  only:
    - master
## 安裝 Hexo-Cli
before_script:
  - npm install hexo-cli -g  # 安裝 Hexo 環境
# 清除緩存並執行編譯
script:
  - hexo clean
  - hexo generate
## deploy 相關設置
after_success:
  - sed -i'' "/^ *repo/s~github\.com~${GITHUBHEXO_TOKEN}@github.com~" _config.yml
  - hexo deploy

接下來你只要新增文章到 Hexo 專案的 GitHub 進去(也就是有 git push 行為),它就會幫你自動部屬囉~

https://ithelp.ithome.com.tw/upload/images/20201009/20119486GnJMRDy76e.png

補充

如果你發現你的 Travis CI 不管怎樣都不甩你的話,你可到 setting 上看一下你的專案有沒有啟用

https://ithelp.ithome.com.tw/upload/images/20201009/20119486U5TppUA2XL.png

最後這個坑算是滿多人會踩到的,也就是你使用 CI 之後你會發現主題無法正常出現,首先你必需打開你的 Hexo 專案到你目前的主題下,然後啟用顯示隱藏資料夾,並刪除主題下的 .git 資料夾,因為主題都是採用 git clone 下來的,所以本身會有一個 .git 資料夾,那由於我們已經有上傳過一次,因此會需要輸入以下指令針對資料夾重新加入版本控制

git rm -r --cache themes/

接下來再重新輸入以下指令就可以正常自動部屬囉

git add .
git commit -m 'fix'
git push

上一篇
(25) 試著學 Hexo - SEO 篇 - SEO 觀念補充
下一篇
(27) 試著學 Hexo - 奇淫技巧 - 自動化部屬(GitHub Actions)
系列文
試著學 Hexo33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言